Day 7 Angular 起手式 – 用 Angular CLI 建立專案骨架 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 7

0

Modern Web

Angular、React、Vue 三框架實戰養成：從零打造高品質前端履歷網站系列第 7 篇

Day 7 Angular 起手式 – 用 Angular CLI 建立專案骨架

17th鐵人賽

2025-09-21 12:34:44

87 瀏覽

分享至

今日目標

了解什麼是 Angular CLI
用 Angular CLI 建立一個新的 Angular 專案
認識 Angular 專案的基本資料夾結構
把 Day 6 的靜態履歷網站「搬進 Angular 專案」做骨架

基礎概念：Angular CLI 是什麼？

在前端框架裡，Angular 最大的特色就是一開始就給你一個完整架構：

檔案結構清楚（components / services / modules）
自帶 TypeScript、SCSS 支援
有內建開發伺服器（不用額外設定 Webpack）
只要一個指令就能產生元件、服務，避免手動重複工作

👉 簡單來說，Angular CLI 是「官方提供的開發工具」，幫你把環境建好、架構搭好，你專心寫功能就行。

實作：建立 Angular 專案

1. 安裝 Angular CLI

請先安裝 Node.js（建議 v18 以上）。

終端機輸入：

npm install -g @angular/cli

檢查安裝是否成功：

ng version

2. 建立新專案

在你要存放的資料夾下輸入：

ng new resume-site

CLI 會問幾個問題：

Would you like to add Angular routing? → 選 Yes（之後我們會用）
Which stylesheet format would you like to use? → 選 SCSS（因為我們 Day 2 已經學了 SCSS）

完成後會自動建立 resume-site/ 專案。

3. 啟動專案

cd resume-site
ng serve

打開瀏覽器進 http://localhost:4200，會看到 Angular 預設的「Welcome」畫面。

認識 Angular 專案結構

進到 src/app/，你會看到幾個重要檔案：

app.component.ts → 主要元件（控制畫面邏輯）
app.component.html → 模板檔案（放 HTML）
app.component.scss → 樣式檔案（放 SCSS）
app.module.ts → 模組設定檔，管理哪些元件要一起用

👉 初學者最常改的就是 app.component.html，這裡可以放我們 Day 6 的履歷網站骨架。

把 Day 6 的 HTML 搬進來

打開 src/app/app.component.html，清空預設內容。
把你在 Day 6 的 index.html 主要 <body> 裡的 HTML 貼進去（記得 <header> ~ <footer>）。
CSS 部分，先複製 Day 6 的 style.css 內容到 src/app/app.component.scss。

這樣就完成了最初的搬家。之後，我們會一步一步把這些 HTML 區塊「切成 Angular 元件」。

成果

成功用 Angular CLI 建立了一個新專案
在瀏覽器跑起來，網址是 http://localhost:4200
預設畫面被我們換掉，現在已經是 Day 6 的履歷網站骨架

小心踩雷（初學者常見錯誤）

忘了進資料夾就 ng serve
- ❌ 在外層執行 → 找不到 Angular 專案
- ✅ 記得先 cd resume-site
貼錯地方
- ❌ 把 HTML 貼到 index.html（Angular 的 index.html 只用來掛 <app-root>）
- ✅ 要貼的是 app.component.html
CSS 沒有生效
- ❌ 貼到 styles.css 但找不到樣式
- ✅ 放在 app.component.scss 才會跟元件一起跑（之後也能抽出來做全域樣式）
ng serve 不斷報錯
- 檢查 Node.js 版本是否太舊（建議 v18+）
- 確認 Angular CLI 是否安裝成功（ng version）

下一步（Day 8 預告）

明天，我們要開始「切元件」：

把 Header、Hero、About、Skills、Projects、Contact、Footer 各自變成 Angular 元件
學習 Angular 的 Component 概念
把 Day 6 的單頁 HTML 轉換成 Angular 架構

Day 6 小專案：純原生 HTML/CSS/TS 的自我介紹頁（可交付 MVP）今日目標

Day 8 Angular 元件切分 – 把履歷網站拆成模組化架構

系列文

Angular、React、Vue 三框架實戰養成：從零打造高品質前端履歷網站共 24 篇

目錄

RSS系列文訂閱系列文

3 人訂閱

完整目錄

熱門推薦

{{ item.subject }}

{{ item.channelVendor }} | {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

16967 篇

完賽人數

198 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 17th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react

IT邦幫忙